<template>
  <div data-v-2fd6a934="" class="shop">
    <!---->
    <div data-v-2fd6a934="" class="goodsShow">
      <div data-v-2fd6a934="" class="shopInfo-box">
        <div data-v-2fd6a934="" class="slide" style="overflow: hidden">
          <van-swipe
            @change="onChange"
            class="slide-group"
            :show-indicators="false"
            :touchable="false"
            autoplay="5000"
            duration="200"
          >
            <van-swipe-item v-for="(item, index) in imglist" :key="index">
              <li
                data-v-2fd6a934=""
                class="imageUrlList-box"
                style="width: 750px; pointer-events: auto"
              >
                <img
                  data-v-2fd6a934=""
                  :src="item"
                  alt=""
                  preview="1"
                  preview-text="商品图"
                  class="shoppinfPage-img-width"
                  data-pswp-uid="1"
                />
              </li>
            </van-swipe-item>
          </van-swipe>
        </div>
        <img
          data-v-2fd6a934=""
          src="https://images.yaodouwang.com/img/common/sliderBg.png"
          class="shoppinfPage-img-bottom"
        />
      </div>
      <div data-v-2fd6a934="" class="slidePage">
        {{ bannerindex }}/
        <span data-v-2fd6a934="" class="page" v-if="imglist">{{
          imglist.length
        }}</span>
      </div>
      <div data-v-2fd6a934="" class="header-icon"><!----></div>
    </div>
    <!---->
    <div data-v-2fd6a934="">
      <div data-v-2fd6a934="" class="bg-fff shopOption_pl">
        <div data-v-2fd6a934="" class="shop_text">
          <div data-v-2fd6a934="" class="clearfix">
            <div data-v-2fd6a934="" class="productNameClass">
              <div data-v-2fd6a934="" class="goods-price">
                <span data-v-2fd6a934="" class="font-px32">¥</span>
                <span
                  data-v-2fd6a934=""
                  class="shopInfo-status"
                  style="position: static"
                  v-if="productinfo"
                  >{{ formatprice(productinfo.DEFAULT_PRICE.price, 0) }}</span
                ><span
                  data-v-2fd6a934=""
                  class="shopInfo-status"
                  style="position: static"
                  v-if="productinfo"
                  >.{{ formatprice(productinfo.DEFAULT_PRICE.price, 1) }}</span
                >
              </div>
              <div data-v-2fd6a934="" class="more-tool">
                <!---->
                <div data-v-2fd6a934="" class="collection-img">
                  <img
                    data-v-2fd6a934=""
                    src="https://images.yaodouwang.com/img/shopOpting/collection.png"
                    alt=""
                  />
                  <span data-v-2fd6a934="" class="collection-title">收藏</span>
                </div>
                <!---->
              </div>
            </div>
            <div data-v-2fd6a934="" class="goods-icon">
              <div data-v-2fd6a934="" class="icon-box">
                <span
                  data-v-2fd6a934=""
                  class="userHealthyCard"
                  v-if="
                    !productinfo ? 0 : productinfo.useHealthyCard == 1 ? 1 : 0
                  "
                  >药神卡</span
                >
                <!---->
                <!---->
                <img
                  v-if="!productinfo ? 0 : productinfo.foreignTrade ? 1 : 0"
                  data-v-2fd6a934=""
                  src=""
                  alt=""
                  class="cross-border-goods"
                />
                <!---->
              </div>
            </div>
            <div data-v-2fd6a934="" class="clearfix-style">
              <p
                data-v-2fd6a934=""
                class="font-px30 color-333 product-name"
                v-if="productinfo"
              >
                {{ productinfo.productName }}
              </p>
            </div>
            <div data-v-2fd6a934="" class="size-collection">
              <p
                data-v-2fd6a934=""
                class="font-px24 color-999 one-txt-cut product-size"
                v-if="productinfo"
              >
                {{ productinfo.productSize }}
              </p>
              <p data-v-2fd6a934="" class="font-px24 color-999 pageview-num">
                <img
                  data-v-2fd6a934=""
                  src=""
                  alt=""
                />
                <span data-v-2fd6a934="" v-if="productinfo">{{
                  productinfo.views
                }}</span>
              </p>
            </div>
            <!---->
          </div>
        </div>
      </div>
      <!-- 优惠券板块 -->
      <!-- <div data-v-2fd6a934="" class="shop-details-coupon">
        <div data-v-2fd6a934="" class="coupon-box">
          <div data-v-2fd6a934="" class="coupon-bg">优惠券</div>
          <div data-v-2fd6a934="" class="coupon-list">
            <div data-v-2fd6a934="" class="one-txt-cut">满200减20</div>
          </div>
          <div data-v-2fd6a934="" class="coupon-btn-right">领劵</div>
        </div>
      </div> -->

      <!-- 配送板块 -->
      <div data-v-2fd6a934="" class="shwoMsg function">
        <p data-v-2fd6a934="" style="margin-bottom: 30px; align-items: center">
          <span data-v-2fd6a934="" class="freight-title">送至</span>
          <span data-v-2fd6a934="" class="send-to-addr" v-if="freight">{{
            freight.sendTo
          }}</span>
          <img
            data-v-2fd6a934=""
            src=""
            alt=""
            class="jump-div"
          />
        </p>
        <p data-v-2fd6a934="">
          <span data-v-2fd6a934="" class="freight-title">运费</span>
          <span data-v-2fd6a934="" class="send-to-addr" v-if="freight">{{
            freight.freightRule
          }}</span>
        </p>
        <ul
          data-v-2fd6a934=""
          class="cross-border-site-warp"
          v-if="!productinfo ? 0 : productinfo.foreignTrade ? 1 : 0"
        >
          <li data-v-2fd6a934="" class="list">
            <div data-v-2fd6a934="" class="icon-box">
              <img
                data-v-2fd6a934=""
                v-if="productinfo"
                :src="productinfo.logo"
                alt=""
              />
            </div>
            <p data-v-2fd6a934="" class="site" v-if="productinfo">
              {{ productinfo.country }}
            </p>
          </li>
          <li data-v-2fd6a934="" class="list">
            <div data-v-2fd6a934="" class="icon-box">
              <img
                data-v-2fd6a934=""
                src=""
                alt=""
              />
            </div>
            <p data-v-2fd6a934="" class="site">【北京保税仓】</p>
          </li>
          <li data-v-2fd6a934="" class="list">
            <div data-v-2fd6a934="" class="icon-box">
              <img
                data-v-2fd6a934=""
                src=""
                alt=""
              />
            </div>
            <p data-v-2fd6a934="" class="site">全国</p>
          </li>
        </ul>
        <p
          data-v-2fd6a934=""
          class="taxBox"
          v-if="!productinfo ? 0 : productinfo.foreignTrade ? 1 : 0"
        >
          <span data-v-2fd6a934="" class="freight-title">税费</span>
          <span data-v-2fd6a934="" class="send-to-addr"
            >进口税：商品价格已含税<img
              data-v-2fd6a934=""
              src=""
              alt=""
          /></span>
        </p>
      </div>
      <!---->
      <!-- 参数板块 -->
      <div
        data-v-2fd6a934=""
        class="shwoMsg function"
        v-if="!productinfo ? 0 : productinfo.foreignTrade ? 0 : 1"
      >
        <p data-v-2fd6a934="">
          <span data-v-2fd6a934="" class="sp0 color-000">参数</span>
          <!---->
          <span data-v-2fd6a934="" class="sp1 color-999 specification"
            >批准文号</span
          >
          <span data-v-2fd6a934="" class="sp2" v-if="productinfo">{{
            productinfo.registerNum
          }}</span>
        </p>
        <p data-v-2fd6a934="">
          <span data-v-2fd6a934="" class="sp0 color-999"></span>
          <span data-v-2fd6a934="" class="sp1 color-999 specification"
            >规格</span
          >
          <span data-v-2fd6a934="" class="sp2" v-if="productinfo">{{
            productinfo.productSize
          }}</span>
        </p>
        <p
          data-v-2fd6a934=""
          v-if="!productinfo ? 0 : productinfo.dosageForm ? 1 : 0"
        >
          <span data-v-2fd6a934="" class="sp0 color-999"></span>
          <span data-v-2fd6a934="" class="sp1 color-999 specification"
            >剂型/型号</span
          >
          <span data-v-2fd6a934="" class="sp2">{{
            productinfo.dosageForm
          }}</span>
        </p>
        <p data-v-2fd6a934="">
          <span data-v-2fd6a934="" class="sp0 color-999"></span>
          <span data-v-2fd6a934="" class="sp1 color-999 specification"
            >生产企业</span
          >
          <span data-v-2fd6a934="" class="sp2" v-if="productinfo">{{
            productinfo.producer
          }}</span>
        </p>
        <div data-v-2fd6a934="" class="warning-notes">
          <div data-v-2fd6a934="" class="warning-notes-div">
            <span
              data-v-2fd6a934=""
              style="
                background-image: url('');
                background-repeat: no-repeat;
                background-size: 25px;
                margin-left: -5px;
                padding-left: 35px;
                box-sizing: border-box;
                background-position: 0px 5px;
                color: black;
              "
              >请仔细阅读产品说明书或者在医务人员的指导下购买和使用，禁忌内容或者注意事项详见说明书。</span
            >
            <!---->
          </div>
        </div>
      </div>
      <!---->
      <div data-v-2fd6a934="" class="store-warp">
        <div data-v-2fd6a934="" class="left">
          <img
            data-v-2fd6a934=""
            src=""
            alt=""
          />
          <p data-v-2fd6a934="" class="store-name" v-if="productinfo">
            {{ productinfo.groupName }}
          </p>
          <p data-v-2fd6a934="" class="store-name">【北京保税仓】</p>
        </div>
        <i data-v-2fd6a934="" class="ydwiconfont iconwode-shezhi-jiantou"></i>
      </div>
    </div>
    <div data-v-2fd6a934="" class="answers-box">
      <div data-v-2fd6a934="" class="answers-box-title">
        <p data-v-2fd6a934="" class="answers-box-title-left">大家都在问</p>
        <div data-v-2fd6a934="" class="evaluate-box-title-right">
          <p data-v-2fd6a934="">
            {{ questionlist.length ? "查看全部" : "暂无问答，去提问" }}
          </p>
          <i data-v-2fd6a934="" class="ydwiconfont iconwode-shezhi-jiantou"></i>
        </div>
      </div>
      <div
        data-v-2fd6a934=""
        v-for="(item, index) in questionlist"
        :key="index"
      >
        <div data-v-2fd6a934="" class="ask">
          <img
            data-v-2fd6a934=""
            src="https://images.yaodouwang.com/img/common/ask.png"
            alt="图片"
            class="ask-img"
          />
          <span data-v-2fd6a934="" class="ask-txt">{{ item.questions }}</span>
        </div>
        <div data-v-2fd6a934="" class="answers">
          <!---->
          <p data-v-2fd6a934="" class="answers-txt">
            {{ item.answersList.length ? item.answersList[0] : "暂无回答" }}
          </p>
        </div>
      </div>
    </div>
    <!---->
    <div data-v-2fd6a934="" class="pt_msg" style="top: 50px; display: none">
      <img
        data-v-2fd6a934=""
        src="https://images.yaodouwang.com/img/common/login.jpg"
      />
      <span data-v-2fd6a934=""></span>
    </div>
    <div
      data-v-2fd6a934=""
      class="des-pic font-px28 color-999"
      v-if="picturedetail"
    >
      <p data-v-2fd6a934="" class="active">图文详情</p>
      <!---->
      <!---->
    </div>
    <div
      data-v-2fd6a934=""
      style="padding: 0px 30px 20px; background: rgb(255, 255, 255)"
      v-if="picturedetail"
    >
      <img
        data-v-2fd6a934=""
        src="../../assets/img/Illustration.2b5075d.jpeg"
        style="width: 100%"
      />
    </div>
    <div data-v-2fd6a934="">
      <div
        data-v-2fd6a934=""
        id="detailsstyle"
        class="detailsstyle"
        v-html="picturedetail"
      ></div>
      <!---->
      <div data-v-2fd6a934="" class="ginoe"></div>
    </div>
    <!---->
    <div
      data-v-2fd6a934=""
      class="faq"
      v-if="!productinfo ? 0 : productinfo.foreignTrade ? 1 : 0"
    >
      <div data-v-2fd6a934="" class="faq-c">常见问题</div>
      <ul data-v-2fd6a934="">
        <li data-v-2fd6a934="">
          <div data-v-2fd6a934="" class="faq-Q">
            <span data-v-2fd6a934="" class="faq-s">Q</span>
            <p data-v-2fd6a934="" class="faq-p">
              什么是跨境商品，跨境电商零售进口指的是什么？
            </p>
            <img
              data-v-2fd6a934=""
              src=""
              alt=""
              :class="['faq-i', { more: q1 }]"
              @click="q1 = !q1"
            />
          </div>
          <div data-v-2fd6a934="" :class="['faq-A', { 'get-more': q1 }]">
            <span data-v-2fd6a934="" class="faq-s">A</span>
            <p data-v-2fd6a934="" class="faq-p">
              跨境商品，是指中国境内消费者通过跨境电商第三方平台经营者自境外购买的商品。跨境电商零售进口，是指中国境内消费者通过跨境电商第三方平台经营者自境外购买商品，并通过“网购保税进口”（海关监管方式代码1210）或“直购进口”（海关监管方式代码9610）运递进境的消费行为。
            </p>
          </div>
        </li>
        <li data-v-2fd6a934="">
          <div data-v-2fd6a934="" class="faq-Q">
            <span data-v-2fd6a934="" class="faq-s">Q</span>
            <p data-v-2fd6a934="" class="faq-p">
              药兜国际跨境进口商品如何确保是正品？
            </p>
            <img
              data-v-2fd6a934=""
              src=""
              alt=""
              class="faq-i"
              :class="['faq-i', { more: q2 }]"
              @click="q2 = !q2"
            />
          </div>
          <div data-v-2fd6a934="" :class="['faq-A', { 'get-more': q2 }]">
            <span data-v-2fd6a934="" class="faq-s">A</span>
            <p data-v-2fd6a934="" class="faq-p">
              药兜国际跨境进口自营商品均在海外生产或销售，商品符合海外质量标准。我们承诺正规渠道、原装正品。
            </p>
          </div>
        </li>
        <li data-v-2fd6a934="">
          <div data-v-2fd6a934="" class="faq-Q">
            <span data-v-2fd6a934="" class="faq-s">Q</span>
            <p data-v-2fd6a934="" class="faq-p">
              药兜国际跨境进口商品为什么要提供身份证信息？
            </p>
            <img
              data-v-2fd6a934=""
              src=""
              alt=""
              class="faq-i"
              :class="['faq-i', { more: q3 }]"
              @click="q3 = !q3"
            />
          </div>
          <div data-v-2fd6a934="" :class="['faq-A', { 'get-more': q3 }]">
            <span data-v-2fd6a934="" class="faq-s">A</span>
            <p data-v-2fd6a934="" class="faq-p">
              根据海关总署公告2018年第194号（关于跨境电子商务零售进出口商品有关监管事宜的公告），开展跨境电子商务零售进口业务的跨境电子商务平台企业、跨境电子商务企业境内代理人应对交易真实性和消费者（订购人）身份信息真实性进行审核，并承担相应责任；身份信息未经国家主管部门或其授权的机构认证的，订购人与支付人应当为同一人。京东国际将根据政策对您订单里的商品进行订购人实名或收件人实名认证，并保证您的实名认证信息仅作清关用途，将被严格保密。
            </p>
          </div>
        </li>
        <li data-v-2fd6a934="">
          <div data-v-2fd6a934="" class="faq-Q">
            <span data-v-2fd6a934="" class="faq-s">Q</span>
            <p data-v-2fd6a934="" class="faq-p">
              药兜国际跨境进口商品为什么不提供发票？
            </p>
            <img
              data-v-2fd6a934=""
              src=""
              alt=""
              class="faq-i"
              :class="['faq-i', { more: q4 }]"
              @click="q4 = !q4"
            />
          </div>
          <div data-v-2fd6a934="" :class="['faq-A', { 'get-more': q4 }]">
            <span data-v-2fd6a934="" class="faq-s">A</span>
            <p data-v-2fd6a934="" class="faq-p">
              因保税区或海外发货属于境外购买行为，因此无法为您开具发票，请您谅解。
            </p>
          </div>
        </li>
        <li data-v-2fd6a934="">
          <div data-v-2fd6a934="" class="faq-Q">
            <span data-v-2fd6a934="" class="faq-s">Q</span>
            <p data-v-2fd6a934="" class="faq-p">
              订单下单后能否取消订单或修改信息？
            </p>
            <img
              data-v-2fd6a934=""
              src=""
              alt=""
              class="faq-i"
              :class="['faq-i', { more: q5 }]"
              @click="q5 = !q5"
            />
          </div>
          <div data-v-2fd6a934="" :class="['faq-A', { 'get-more': q5 }]">
            <span data-v-2fd6a934="" class="faq-s">A</span>
            <p data-v-2fd6a934="" class="faq-p">
              下单支付后，订单提交至海关申报及纳税，客户将不能修改订单信息（收货地址、电话等），也不能取消订单，请知晓并谅解。订单若7天内未确认完成，系统会自动确认完成，如有疑问请及时联系客服。
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div data-v-2fd6a934="" id="commodity" class="commodity">
      <div data-v-2fd6a934="" class="title">
        <div data-v-2fd6a934="" class="title-left"></div>
        <div data-v-2fd6a934="" class="title-text">
          <span data-v-2fd6a934="" class="line-r-style"
            ><img
              data-v-2fd6a934=""
              src=""
          /></span>
        </div>
        <div data-v-2fd6a934="" class="title-left"></div>
      </div>
      <div data-v-2fd6a934="" class="commodity_list">
        <div
          data-v-4fc4293a=""
          data-v-2fd6a934=""
          class="product-list_item"
          v-for="(item, index) in productlist"
          :key="index"
          @click="linkToDetail(item.productId)"
        >
          <div data-v-4fc4293a="" class="product-img">
            <img
              data-v-4fc4293a=""
              alt="商品图片"
              :data-src="item.imageUrl"
              :src="item.imageUrl"
              lazy="loading"
            />
          </div>
          <div data-v-4fc4293a="" class="product-info">
            <div
              data-v-4fc4293a=""
              class="product-name txt-cut color-333 font-px26"
            >
              <span data-v-4fc4293a="">{{ item.productName }}</span>
            </div>
            <div data-v-c63fad28="" class="product-tag">
              <div
                data-v-c63fad28=""
                class="yskMake"
                v-if="item.labels.useHealthyCard == 'Y'"
              >
                药神卡
              </div>
              <div
                data-v-c63fad28=""
                class="quan"
                v-if="item.labels.quan == 'Y'"
              >
                <img
                  data-v-c63fad28=""
                  src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                  alt="券"
                />
              </div>
              <div
                data-v-fae5bece=""
                data-v-c63fad28=""
                alt="券"
                class="pt-icon"
                v-if="item.labels.isGroup == 'Y'"
              >
                拼团
              </div>
            </div>
            <div data-v-4fc4293a="" class="product-price">
              <div data-v-4fc4293a="" class="product-price-left">
                <div
                  data-v-d4462b7e=""
                  data-v-4fc4293a=""
                  class="money_show"
                  fontcolor="#FF7900"
                >
                  <span data-v-d4462b7e="" class="now_money"
                    ><span data-v-d4462b7e=""
                      ><span data-v-d4462b7e="" class="font-px28">¥</span
                      ><span data-v-d4462b7e="" class="font-px38"
                        >{{ formatprice(item.price, 0)
                        }}<span data-v-d4462b7e="" class="font-px26"
                          >.{{ formatprice(item.price, 1) }}</span
                        ></span
                      ></span
                    ></span
                  >
                </div>
              </div>
              <div data-v-cdd5d3c4="" data-v-4fc4293a="" class="cart-icon">
                <img
                  data-v-cdd5d3c4=""
                  src=""
                  alt="加购物车"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-v-2fd6a934="" class="bottomed-img">
      <img
        data-v-2fd6a934=""
        src="https://images.yaodouwang.com/img/shopOpting/bottomed.png"
      />
    </div>
    <footer data-v-2fd6a934="" class="footer-option">
      <ul data-v-2fd6a934="" class="footer-fun">
        <li data-v-2fd6a934="">
          <img
            data-v-2fd6a934=""
            src=""
          />
          <p data-v-2fd6a934="" class="font-px20 color-000">店铺</p>
        </li>
        <li data-v-2fd6a934="" style="padding: 0px 10px">
          <a
            data-v-2fd6a934=""
            href="tel:186****2443"
            style="width: 100%; height: 100%; display: block"
            ><img
              data-v-2fd6a934=""
              src="https://images.yaodouwang.com/img/common/kefu.png"
            />
            <p
              data-v-2fd6a934=""
              class="font-px20 color-000"
              style="margin-top: -10px"
            >
              客服电话
            </p></a
          >
        </li>
        <li data-v-2fd6a934="" @click="$router.push('/cart').catch((err) => err)">
          <img
            data-v-2fd6a934=""
            src="https://images.yaodouwang.com/img/shopOpting/shoppingcar.png"
          />
          <span data-v-2fd6a934="" class="orderStatus" v-if="this.$store.state.zlstore.userinfo && this.$store.state.pjcart.countQuantity!=0">{{ this.$store.state.pjcart.countQuantity}}</span>
          <p data-v-2fd6a934="" class="font-px20 color-000">购物车</p>
        </li>
      </ul>
      <div
        data-v-2fd6a934=""
        class="shopW"
        v-if="!productinfo ? 0 : productinfo.quantityOnHandTotal ? 0 : 1"
      >
        库存不足，到货通知
      </div>
      <div
        data-v-2fd6a934=""
        class="shopC"
        @click="handleShowCart"
        v-if="!productinfo ? 0 : productinfo.quantityOnHandTotal ? 1 : 0"
      >
        加入购物车
      </div>
      <div
        data-v-2fd6a934=""
        class="shopM"
        v-if="!productinfo ? 0 : productinfo.quantityOnHandTotal ? 1 : 0"
        @click="handleShowOrder"
      >
        现在购买
      </div>
    </footer>
    <div data-v-2fd6a934="" class="Commodity" style="display: none">
      <div data-v-2fd6a934="">商品已经下架</div>
    </div>
    <div data-v-7c5cbee2="" data-v-2fd6a934="">
      <div data-v-7c5cbee2="">
        <div
          data-v-7c5cbee2=""
          class="mint-popup pop-common mint-popup-bottom"
          style="display: none; background: rgb(245, 245, 245)"
        >
          <div data-v-7c5cbee2="" class="service-phone-popup">
            <p data-v-7c5cbee2="" class="color-333 font-px32">优惠券</p>
            <div data-v-7c5cbee2="" class="closeBtn">
              <img
                data-v-7c5cbee2=""
                src="https://images.yaodouwang.com/img/shopOpting/closeBtn.png"
              />
            </div>
            <div data-v-2fd6a934="" class="coupon-popup">
              <div data-v-2fd6a934="" class="couponListcss">
                <img
                  data-v-2fd6a934=""
                  src="https://images.yaodouwang.com/img/coupon/nocoupon.png"
                  alt=""
                />
                <p data-v-2fd6a934="" class="nocouponListcss">
                  没有可使用的优惠券
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      data-v-2fd6a934=""
      class="mint-popup mint-popup-bottom"
      style="display: none; width: 100%; border-radius: 15px 15px 0px 0px"
    >
      <div data-v-2fd6a934="" class="bg-fff detailsBox_area">
        <p data-v-2fd6a934="" class="detailsBox_area_top">
          包邮说明
          <img
            data-v-2fd6a934=""
            src="https://images.yaodouwang.com/img/common/close-popup.png"
            alt=""
            class="close-popup"
          />
        </p>
        <div data-v-2fd6a934="" class="detailsBox_area_div">
          <p data-v-2fd6a934=""><span data-v-2fd6a934="">包邮地区：</span></p>
          <!---->
        </div>
        <div data-v-2fd6a934="" class="detail_popup_btn">
          <p data-v-2fd6a934="">我知道了</p>
        </div>
      </div>
    </div>
    <div
      data-v-2fd6a934=""
      class="mint-popup mint-popup-bottom"
      style="display: none; width: 100%; border-radius: 15px 15px 0px 0px"
    >
      <div data-v-2fd6a934="" class="bg-fff detailsBox">
        <p data-v-2fd6a934="" class="detailsBox_top">
          功能主治
          <img
            data-v-2fd6a934=""
            src="https://images.yaodouwang.com/img/common/close-popup.png"
            alt=""
            class="close-popup"
          />
        </p>
        <p data-v-2fd6a934="" class="detailsBox_text"></p>
      </div>
    </div>

    <!-- 购物车弹窗 -->
    <van-action-sheet v-model="isShowCart" :lazy-render="false">
      <div
        data-v-2fd6a934=""
        class="mint-popup mint-popup-bottom"
        style="width: 100%"
      >
        <div data-v-2fd6a934="" class="shoppingcarpopup">
          <div data-v-2fd6a934="" class="popupVisibleBg">
            <div data-v-2fd6a934="" class="shoppingcarpopupstyle">
              <div
                data-v-2fd6a934=""
                class="closeBtn"
                @click="isShowCart = !isShowCart"
              >
                <img
                  data-v-2fd6a934=""
                  src="https://images.yaodouwang.com/img/shopOpting/closeBtn.png"
                />
              </div>
              <span data-v-2fd6a934="" class="shoppingcar-pic"
                ><img
                  data-v-2fd6a934=""
                  src="https://ydw-b2c.oss-cn-beijing.aliyuncs.com/20220124/96b762a13f4842e2a8bca2b741fabb21.jpg"
                  alt="商品图片"
              /></span>
              <div data-v-2fd6a934="" class="shoppingcar-text">
                <p data-v-2fd6a934="" v-if="productinfo">
                  {{ productinfo.productName }}
                </p>
                <p data-v-2fd6a934="" v-if="productinfo">
                  {{ productinfo.productSize }}
                </p>
                <p data-v-2fd6a934="">
                  <span data-v-2fd6a934="" class="linecss">¥</span>
                  <span
                    data-v-2fd6a934=""
                    class="showpricecss"
                    v-if="productinfo"
                    >{{ formatprice(productinfo.DEFAULT_PRICE.price, 0) }}.{{
                      formatprice(productinfo.DEFAULT_PRICE.price, 1)
                    }}</span
                  >
                </p>
              </div>
            </div>
            <div data-v-2fd6a934="" class="numAdd">
              <div data-v-2fd6a934="" class="numAdd-item-up">
                <p data-v-2fd6a934="" v-if="productinfo">
                  库存{{ productinfo.quantityOnHandTotal }}件
                </p>
              </div>
              <div
                data-v-2fd6a934=""
                class="numAdd-item-top"
                style="margin-bottom: 60px"
              >
                <div data-v-2fd6a934="">数量</div>
                <div data-v-2fd6a934="" class="numcss">
                  <div
                    data-v-2fd6a934=""
                    class="c-l"
                    @click="productnum > 1 && productnum--"
                  >
                    <img
                      data-v-2fd6a934=""
                      src="https://images.yaodouwang.com/img/common/graycardSub.png"
                      alt=""
                    />
                  </div>
                  <div data-v-2fd6a934="" class="c-c">
                    <input
                      data-v-2fd6a934=""
                      name="pricenum"
                      type="number"
                      oninput="this.value=this.value.replace(/[^0-9.]+/,'');"
                      class="text-box"
                      v-model="productnum"
                      @blur="handelcheck"
                    />
                  </div>
                  <div data-v-2fd6a934="" class="c-r" @click="productnum++">
                    <img
                      data-v-2fd6a934=""
                      src="https://images.yaodouwang.com/img/common/cardAdd.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
          <div data-v-2fd6a934="" class="okBtn" @click="handeladdcart()">
            确定
          </div>
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model="isShowOrder" :lazy-render="false">
      <div
        data-v-2fd6a934=""
        class="mint-popup mint-popup-bottom"
        style="width: 100%"
      >
        <div data-v-2fd6a934="" class="shoppingcarpopup">
          <div data-v-2fd6a934="" class="popupVisibleBg">
            <div data-v-2fd6a934="" class="shoppingcarpopupstyle">
              <div
                data-v-2fd6a934=""
                class="closeBtn"
                @click="isShowOrder = !isShowOrder"
              >
                <img
                  data-v-2fd6a934=""
                  src="https://images.yaodouwang.com/img/shopOpting/closeBtn.png"
                />
              </div>
              <span data-v-2fd6a934="" class="shoppingcar-pic"
                ><img
                  data-v-2fd6a934=""
                  src="https://ydw-b2c.oss-cn-beijing.aliyuncs.com/20220124/96b762a13f4842e2a8bca2b741fabb21.jpg"
                  alt="商品图片"
              /></span>
              <div data-v-2fd6a934="" class="shoppingcar-text">
                <p data-v-2fd6a934="" v-if="productinfo">
                  {{ productinfo.productName }}
                </p>
                <p data-v-2fd6a934="" v-if="productinfo">
                  {{ productinfo.productSize }}
                </p>
                <p data-v-2fd6a934="">
                  <span data-v-2fd6a934="" class="linecss">¥</span>
                  <span
                    data-v-2fd6a934=""
                    class="showpricecss"
                    v-if="productinfo"
                    >{{ formatprice(productinfo.DEFAULT_PRICE.price, 0) }}.{{
                      formatprice(productinfo.DEFAULT_PRICE.price, 1)
                    }}</span
                  >
                </p>
              </div>
            </div>
            <div data-v-2fd6a934="" class="numAdd">
              <div data-v-2fd6a934="" class="numAdd-item-up">
                <p data-v-2fd6a934="" v-if="productinfo">
                  库存{{ productinfo.quantityOnHandTotal }}件
                </p>
              </div>
              <div
                data-v-2fd6a934=""
                class="numAdd-item-top"
                style="margin-bottom: 60px"
              >
                <div data-v-2fd6a934="">数量</div>
                <div data-v-2fd6a934="" class="numcss">
                  <div
                    data-v-2fd6a934=""
                    class="c-l"
                    @click="buynum > 1 && buynum--"
                  >
                    <img
                      data-v-2fd6a934=""
                      src="https://images.yaodouwang.com/img/common/graycardSub.png"
                      alt=""
                    />
                  </div>
                  <div data-v-2fd6a934="" class="c-c">
                    <input
                      data-v-2fd6a934=""
                      name="pricenum"
                      type="number"
                      oninput="this.value=this.value.replace(/[^0-9.]+/,'');"
                      class="text-box"
                      v-model="buynum"
                      @blur="handelcheck"
                    />
                  </div>
                  <div data-v-2fd6a934="" class="c-r" @click="buynum++">
                    <img
                      data-v-2fd6a934=""
                      src="https://images.yaodouwang.com/img/common/cardAdd.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
          <div data-v-2fd6a934="" class="okBtn" @click="handelchecknow()">
            确定
          </div>
        </div>
      </div>
    </van-action-sheet>
    <!---->
    <div data-v-001f4f88="" data-v-2fd6a934=""><!----></div>
    <div data-v-09e7d4ac="" data-v-2fd6a934=""><!----></div>
  </div>
</template>

<script>
import {
  detailproductinfo,
  detailfreight,
  detailrecommend,
  detailcomment,
  detaildetail,
  detailaddcart,
} from "../../api/zl-goods";
import { ownCartList } from "../../api/pjmedicinecart";
export default {
  data() {
    return {
      productinfo: null, //商品信息
      bannerindex: 1, //轮播页码
      freight: null, //配送信息
      productlist: [], //推荐商品列表
      imglist: [], //轮播图列表
      isShowCart: false, //加入购物车是否显示
      productnum: 1, //加入购物车数量
      questionlist: [], //大家都在问列表
      picturedetail: "", //图文详情
      q1: false,
      q2: false,
      q3: false,
      q4: false,
      q5: false,
      buynum:1,   //立即购买数量
      isShowOrder:false //立即购买是否显示
    };
  },
  created() {
    detailproductinfo(this.$route.params.id).then((res) => {
      //商品信息
      this.productinfo = res.data.data;
      this.imglist = res.data.data.imageUrlList;
    });
    detailfreight(this.$route.params.id).then((res) => {
      //配送信息
      this.freight = res.data.data;
    });
    detailrecommend(this.$route.params.id).then((res) => {
      //推荐列表
      this.productlist = res.data.data.products;
    });
    detailcomment(this.$route.params.id).then((res) => {
      //大家都在问
      this.questionlist = res.data.data;
    });
    detaildetail(this.$route.params.id).then((res) => {
      if(res.data.data)
      this.picturedetail = res.data.data.contact;
    });
  },
  methods: {
    onChange(index) {
      this.bannerindex = index + 1;
    },
    formatprice(pri, i) {
      //格式化价格
      if (pri) {
        pri = pri + "";
        let arr = pri.split(".");
        if (arr.length == 1) {
          arr.push("00");
        } else {
          arr[1] < 10 ? (arr[1] = arr[1] + "0") : "";
        }
        return arr[i];
      }
    },
    handelcheck() {
      if (this.productnum > this.productinfo.quantityOnHandTotal) {
        this.$toast.fail(
          "库存不足,当前剩余库存" + this.productinfo.quantityOnHandTotal
        );
        this.productnum = this.productinfo.quantityOnHandTotal;
      }
      if (this.productnum == 0) {
        this.$toast.fail("请输入正整数！");
        this.productnum = 1;
      }
    },
    handeladdcart() {
      let o = {
        "cartAddVos": [
          {
            "productId": this.$route.params.id,
            "quantity": this.productnum,
          },
        ],
        "isBuy": false,
      };
      detailaddcart(o).then((res) => {
        ownCartList().then((res) => {
            this.$toast.success("已加入购物车成功");
            //发起请求购物车里面的商品列表
            if(res.data.supplierList){
              var supplierList = res.data.supplierList;
            }
            this.$store.commit("pjcart/initSupplierList", supplierList);
            this.isShowCart =false;
          });
      });
    },
    linkToDetail(id) {
      this.$router.push("/children/detail/" + id);
    },
    handelchecknow(){
      let o = {
        "cartAddVos": [
          {
            "productId": this.$route.params.id,
            "quantity": this.buynum,
          },
        ],
        "isBuy": true,
      };
      detailaddcart(o).then((res) => {
        this.$router.push('/children/order');
      });
    },
    handleShowCart(){
      if(this.$store.state.zlstore.userinfo==null){
        this.$toast.fail('请先登录');
        this.$router.push({ path: '/children/login', query: { target: this.$route.path } });
      }
      this.isShowCart=!this.isShowCart
    },
    handleShowOrder(){
      if(this.$store.state.zlstore.userinfo==null){
        this.$toast.fail('请先登录');
        this.$router.push({ path: '/children/login', query: { target: this.$route.path } });
      }
      this.isShowOrder=!this.isShowOrder
    }
  },
};
</script>

<style lang="less" scoped>
</style>